<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/node.css" />
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../css/icons-extra.css" />
		<style>
			html,
			body {
				background-color: #efeff4;
				overflow-x: hidden;
			}
			
			p {
				margin: 10px;
			}
			
			h1 {
				margin: 10px;
			}
		</style>
	</head>

	<body>

		<header id="header" class="mui-bar mui-bar-transparent">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">评论(309)</h1>
			<div align="right" style="margin: 5px 0px 0px;float: right; " id="icons">
				<img index=1 src="../icon/newsIcon/1.png" width="30px"  />
				<img index=3 src="../icon/newsIcon/4.png" width="30px"  />
				<img index=4 src="../icon/newsIcon/5.png" width="30px"  />
			</div>
		</header>

		<nav class="mui-bar mui-bar-tab">
			<div>
				<input type="text" name="" id="" value="" placeholder="写评论..." style="width: 75%; height: 30px; margin: 5px;" />
				<a href="#list2"><span class="mui-icon mui-icon-chat" style="margin: 4px;"></span></a>
				<a><span class="mui-icon-extra mui-icon-extra-heart" style="margin: 4px;"></span></a>
			</div>
		</nav>

		<div class="mui-content">
			<div id="details" style="margin: 50px 0px;">

			</div>

			<h4 align="center">延续阅读</h4>

			<div id="list1">
				<div id="item1">
					<div class="node-frame">
						<div style="height: 60px;">
							<img id="img1" class="node-img" src="../img/shuijiao.jpg" height="100%" align="right">
							<div id="theme" class="node-theme">文章标题</div>
						</div>
					</div>
				</div>
			</div>

			<h4>读者评论(309)</h4>

			<div id="list2">
				<div id="item2">
					<div class="node-frame">
						<div>
							<img src="../icon/logo.png" align="left" width="40px" height="40px" style="border-radius: 50%;margin: 0px 5px;" />
							<a>读者昵称</a>
							<p class="mui-pull-right">12 <span class="mui-icon-extra mui-icon-extra-like mui-right" /></p>
							<p>好好好，很好！很好！</p>
						</div>
						<p>3小时前</p>
					</div>
				</div>
			</div>

		</div>

		<script src="../js/mui.min.js"></script>
		<script src="../json/data1.js"></script>

		<script type="text/javascript">
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});

			var list1 = document.getElementById("list1");
			var list2 = document.getElementById("list2");
			var item1 = document.getElementById("item1");
			var item2 = document.getElementById("item2");
			item1.style.display = 'none';
			item2.style.display = 'none';

			for(var i = 0; i < 5; i++) {
				var node = item2.cloneNode(true);
				list2.appendChild(node);
				node.style.display = 'inline';
			}
			var id;
			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				id = self.id;

				for(var i = 0; i < 5; i++) {
					var o = data1[(id + i) % data1.length];
					var div = item1.cloneNode(true);
					var theme = div.querySelector("#theme");
					var img = div.querySelector("#img1");
					theme.textContent = o.title;
					img.src = o.img[0];
					list1.appendChild(div);
					div.style.display = 'inline';
					div.name = o.id;
					div.addEventListener("click", function() {
						mui.openWindow("details.html", this.name);
					});
				}
				plus.io.requestFileSystem(plus.io.PRIVATE_WWW, fileSystem);
			});

			function fileSystem(fs) {
				fs.root.getFile('details/' + id + '.html', {
					create: true
				}, function(fileEntry) {
					fileEntry.file(function(file) {
						var fileReader = new plus.io.FileReader();
						fileReader.readAsText(file, 'utf-8');
						fileReader.onloadend = function(evt) {
							var e = document.createElement("div");
							e.innerHTML = evt.target.result;
							var details1 = e.querySelector("#details");
							var details2 = document.getElementById("details");
							details2.appendChild(details1);
						}
					});
				});
			}
		</script>

	</body>

</html>